<template>
  <!-- <div class="address">
    <div class="name flex-a"><span>{{ addrInfo ? addrInfo.userName : '' }}</span><span>{{
      addrInfo ? addrInfo.userPhone : '' }}</span></div>
    <div class="addr">{{ addrInfo ? addrInfo.provinceName + addrInfo.cityName + addrInfo.regionName +
      addrInfo.detailAddress : '' }}</div>
    <div class="title">商品清单</div>
  </div> -->
  <div>
    <div class="status">
      <div class="pay flex-a">
        <Clock size="16" color="#ffffff" v-if="orderInfo.orderStatus == 0" />
        <Success size="16" color="#ffffff" v-if="orderInfo.orderStatus == 1" />
        <Loading1 size="16" color="#ffffff" v-if="orderInfo.orderStatus == 2" />
        <Loading size="16" color="#ffffff" v-if="orderInfo.orderStatus == 3" />
        <Success size="16" color="#ffffff" v-if="orderInfo.orderStatus == 4" />
        <Failure size="16" color="#ffffff"
          v-if="(orderInfo.orderStatus == -2 || orderInfo.orderStatus == -1 || orderInfo.orderStatus == -3) && orderInfo.newBeeMallOrderItemVOS[0].isRef == null" />
        <span
          v-if="(orderInfo.orderStatus == -2 || orderInfo.orderStatus == -1 || orderInfo.orderStatus == -3) && orderInfo.newBeeMallOrderItemVOS[0].isRef == null">
          已取消</span>
        <span v-if="orderInfo.orderStatus == 0">待支付</span>
        <span v-if="orderInfo.orderStatus == 1">已支付</span>
        <span v-if="orderInfo.orderStatus == 2">已配货</span>
        <span v-if="orderInfo.orderStatus == 3">已出库</span>
        <span v-if="orderInfo.orderStatus == 4">已完成</span>
        <span v-if="orderInfo.orderStatus == 5 && orderInfo.newBeeMallOrderItemVOS[0].isRef != null">售后</span>
      </div>
      <div class="close" v-if="orderInfo.orderStatus == 0">120分钟后订单自动关闭，请及时付款哦</div>
      <div class="close" v-if="orderInfo.orderStatus == 1">商家正在配货，请耐心等待</div>
      <div class="close" v-if="orderInfo.orderStatus == 2">商品已配货，等待出库中</div>
      <div class="close" v-if="orderInfo.orderStatus == 3">商品已出库，请关注物流动态</div>
      <div class="close" v-if="orderInfo.orderStatus == 4">交易已完成，祝您购物愉快</div>
      <div class="close" v-if="orderInfo.orderStatus == 5 && orderInfo.newBeeMallOrderItemVOS[0].isRef != null">
        订单售后中，请关注动态</div>
      <div class="close"
        v-if="(orderInfo.orderStatus == -2 || orderInfo.orderStatus == -1 || orderInfo.orderStatus == -3) && orderInfo.newBeeMallOrderItemVOS[0].isRef == null">
        订单已取消
      </div>
    </div>
    <div class="address">
      <div class="name flex-a flex-b">
        <div class="flex-a">
          <img src="https://cxj.szzkba.cn/upload/i/2024/09/18/152025_1.png" alt="">
          <span>{{ addrInfo ? addrInfo.userName : '' }}</span>
          <span>{{
            addrInfo ? addrInfo.userPhone : '' }}</span>
        </div>
        <Right size="12" />
      </div>
      <div class="addr flex-a flex-b">
        <div class="flex-a">
          <img src="https://cxj.szzkba.cn/upload/i/2024/09/18/152025.png" alt="">
          <span>{{ addrInfo ?
            addrInfo.provinceName + addrInfo.cityName + addrInfo.regionName +
            addrInfo.detailAddress : '' }}</span>
        </div>
        <Right size="12" />
      </div>
      <!-- <div class="title">商品清单</div> -->
    </div>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { Right, Success, Failure, Clock, Loading1, Loading } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
export default {
  components: {
    Right, Success, Failure, Clock, Loading1, Loading
  },
  setup() {
    const state = reactive({
      id: '',
      addrInfo: {},
      orderInfo: {}
    });
    onMounted(() => {
      mitt.on("address", (val) => {
        state.addrInfo = val
      })
      mitt.on("detail", (val) => {
        state.orderInfo = val
      })
    });
    return { ...toRefs(state) };
  }
};
</script>
<style lang="scss">
.status {
  background: #96CF00;
  height: 180rpx;
  border-radius: 0 0 20rpx 20rpx;
  color: #fff;

  .pay {
    justify-content: center;
    margin-bottom: 20rpx;
    padding-top: 10rpx;

    img {
      width: 30rpx;
      height: 30rpx;
      margin-right: 20rpx;
    }

    span {
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 15rpx;
    }
  }

  .close {
    text-align: center;
    font-size: 20rpx;
    margin-bottom: 40rpx;
  }
}

.address {
  padding: 30rpx 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: -60rpx 10rpx 20rpx;

  .name {
    padding-bottom: 10rpx;
    margin-bottom: 10rpx;

    img {
      width: 20rpx;
      height: 20rpx;
      padding: 10rpx;
      border-radius: 50%;
      background: #CEF542;
      margin-right: 15rpx;
    }

    span:first-child {
      color: #2A2D21;
      font-size: 30rpx;
      margin-right: 10rpx;
    }

    span:last-child {
      color: #2A2D21;
      font-size: 30rpx;
    }
  }

  .addr {
    color: #2A2D21;

    img {
      width: 20rpx;
      height: 20rpx;
      padding: 10rpx;
      border-radius: 50%;
      background: #CEF542;
      margin-right: 15rpx;
    }

    font-size: 30rpx;
    padding-bottom: 20rpx;
  }
}
</style>